import React, {
	PureComponent
} from 'react';

import {
	CSSTransition,
	TransitionGroup
} from 'react-transition-group';

import {
	HeaderWrapper,
	Logo,
	Nav,
	NavItem,
	NavSearch,
	Addition,
	Button,
	SerachWrapper,
	SearchInfo,
	SearchInfoTitle,
	SearchInfoSwitch,
	SearchInfoList,
	SearchInfoItem
} from './style';

import {
	actionCreators
} from './store';

import { actionCreators as loginActionCreators } from '../../pages/login/store';

import {
	connect
} from 'react-redux';

import {
	Link
} from 'react-router-dom';

class Header extends PureComponent {

	render() {
		const {
			focused,
			list,
			handleInputFocus,
			handleInputBlur,
			login,
			logout
		} = this.props;

		return (
			<HeaderWrapper>
				<Link to='/'>
					<Logo />
				</Link>
				<Nav>
					<NavItem className = 'left active'>
						<span className = 'iconfont'>&#xe60c;</span>
						首页
					</NavItem>
					<NavItem className = 'left'>
						<span className = 'iconfont'>&#xe666;</span>
						下载App
					</NavItem>
					{
						login? 
						<NavItem className = 'right' onClick = {logout}>退出</NavItem> 
						: <Link to='/login'> <NavItem className = 'right'>登录</NavItem></Link>
					}
					<NavItem className = 'right'>
						<span className = 'iconfont'>&#xe600;</span>
					</NavItem>
					
					<SerachWrapper>
						<CSSTransition 
							in = {focused}
							timeout = {300}
							classNames = 'slide'
						>
							<NavSearch 
								className = {focused ? 'focused':''} 
								onFocus = {() => {handleInputFocus(list)}}
								onBlur = {handleInputBlur}
							/>
						</CSSTransition>
						<span className = {focused ? 'focused iconfont zoom':'iconfont zoom'}>&#xe62f;</span>
						<TransitionGroup>
						{
							this.getListArea(focused)
						}
						</TransitionGroup>
					</SerachWrapper>
				</Nav>
				<Addition>
					<Link to='/write' >
						<Button className = 'writing'>
							<span className = 'iconfont'>&#xe616;</span>
							写文章
						</Button>
					</Link>
					<Button className = 'reg'>注册</Button>
				</Addition>
			</HeaderWrapper>
		)
	}

	getListArea() {
		const {
			focused,
			mouseIn,
			list,
			page,
			pageTotal,
			handleMouseEnter,
			handleMouseLeave,
			handleChangePage
		} = this.props;

		const pageList = [];
		const jsList = list.toJS();

		for (let i = (page - 1) * 10; i < page * 10; i++) {
			if (jsList[i]) {
				pageList.push(<SearchInfoItem key={i}>{jsList[i]}</SearchInfoItem>);
			}
		}

		if (focused || mouseIn) {
			return (
				<CSSTransition
					in = {focused || mouseIn}
					timeout = {300}
					classNames = 'show'
				>
					<SearchInfo 
						onMouseEnter = {handleMouseEnter}
						onMouseLeave = {handleMouseLeave}
					>
						<SearchInfoTitle>
							热门搜索
							<SearchInfoSwitch onClick = {() => {handleChangePage(page, pageTotal, this.spinIcon)}} >
								<span ref = {(icon) => {this.spinIcon = icon}} className = 'iconfont spin' >&#xe851;</span>
								换一批
							</SearchInfoSwitch>
						</SearchInfoTitle>
						<SearchInfoList>
							{pageList}
						</SearchInfoList>
					</SearchInfo>
				</CSSTransition>
			)
		} else {
			return null;
		}
	}
}

const mapStateToProps = (state) => {
	return {
		focused: state.getIn(['header', 'focused']),
		mouseIn: state.getIn(['header', 'mouseIn']),
		list: state.getIn(['header', 'list']),
		page: state.getIn(['header', 'page']),
		pageTotal: state.getIn(['header', 'pageTotal']),
		login:state.getIn(['login','login'])
	}
}

const mapDispatchToProps = (dispatch) => {
	return {
		handleInputFocus(list) {
			// console.log(list);
			// if (list.size > 0) {
			// 	dispatch(actionCreators.getSearchItemList())
			// }
			(list.size === 0) && dispatch(actionCreators.getSearchItemList());
			dispatch(actionCreators.searchFocused());
		},
		handleInputBlur() {
			dispatch(actionCreators.searchBlur());
		},
		handleMouseEnter() {
			dispatch(actionCreators.mouseEnter());
		},
		handleMouseLeave() {
			dispatch(actionCreators.mouseLeave());
		},
		handleChangePage(page, pageTotal, spin) {
			// console.log(spin);
			let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
			if (originAngle) {
				originAngle = parseInt(originAngle, 10);
			} else {
				originAngle = 0;
			}
			spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';

			if (page < pageTotal) {
				dispatch(actionCreators.changePage(page + 1));
			} else {
				dispatch(actionCreators.changePage(1));
			}
		},
		logout(){
			dispatch(loginActionCreators.logout());
		}
	}
}


export default connect(mapStateToProps, mapDispatchToProps)(Header);